<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #app{
            position: relative;
            width: 320px;
            height: 480px;
            margin:0 auto;
            background-image:url("./img/game_bg.jpg");
        }
        #score{
            position: absolute;
            left:65px;
            top:10px;
            font-size: 20px;
            color:skyblue;
        }
        #progress {
            position: absolute;
            left: 63px;
            top: 66px;
            width: 180px;
            height: 16px;
            background: url(./img/progress.png);
        }
        #start{
            position: absolute;
            top:200px;
            font-size: 30px;
            color:white;
            left:50%;
            transform: translateX(-50%);
        }
        #start:hover{
            color:red;
            cursor: pointer;
        }
        #wolf{
            position: absolute;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="score">0</div>
    <div id="progress"></div>
    <div id="wolf"></div>
    <div id="start">开始</div>
</div>
</body>
<script>
    // 1- 出洞 0----5
    // 2- 回洞 5----0
    // 3- 挨打 6----9
    const btn = document.querySelector("#start");
    // 获取存放图片的位置
    const wolfBox = document.querySelector("#wolf");
    // 存放洞穴的位置
    var wolfStartArr = [
        {left: "98px", top: "115px"},
        {left: "17px", top: "160px"},
        {left: "15px", top: "220px"},
        {left: "30px", top: "293px"},
        {left: "122px", top: "273px"},
        {left: "207px", top: "295px"},
        {left: "200px", top: "211px"},
        {left: "187px", top: "141px"},
        {left: "100px", top: "191px"}
    ];
    document.onmousedown = function(e){
        e.preventDefault();// 移除默认行为（选中的行为）
    }
    btn.onclick = function(){
        this.style.display="none";// 隐藏自身
        createWolf();
    }
    function createWolf(){
        const position = wolfStartArr[getRandom(0,8)];// 获取洞穴的位置
        // 往id为wolf的div中存放图片
        const wolfImg = document.createElement("img");
        wolfBox.style.left=position.left;
        wolfBox.style.top=position.top;
        // 1- 出洞 0----5
        // 2- 回洞 5----0
        // 3- 挨打 6----9
        let index = 0;
        let state = 1;// 1 出洞 2- 回洞  3- 挨打
        const wolfType = getRandom(1,10)<=8?'h':'x';// h:灰  x:小灰

        const timer = setInterval(()=>{
            wolfImg.src = `./img/${wolfType}${index}.png`;// 灰太狼80%，小灰灰20%
            // 出洞
            if(state === 1){
                index++;
                if(index===5){
                    state = 2;
                }
            }else if(state === 2){
                index--;
                if(index<0){
                    clearInterval(timer);// 移除计时器
                    wolfBox.removeChild(wolfImg);// 移除图片

                    createWolf();

                }
            }


        },200);

        wolfBox.appendChild(wolfImg);
    }
    // 获取指定随机数的方法
    function getRandom(min,max){
        return Math.floor(Math.random()*(max-min+1)+min);
    }
</script>
</html>